<template>
	<view>
		<!-- 头部提示 -->
		<navbar :backshow="true" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>
		<!-- tab切换 -->
		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }">123</view>
		<view class="tabbox">
			<view class="tabboxitem" :class="{ active: activeTab === 0 }" @click="setActiveTab(0)">
				房间预约记录
			</view>

			<view class="tabboxitem" :class="{ active: activeTab === 1 }" @click="setActiveTab(1)">
				设备预约记录
			</view>

			<!-- 下划线标识 -->
			<view class="underline" :style="{ left: underlineLeft }"></view>
		</view>
		<view v-show="activeTab === 0" class="yyitembox">
			<!-- 预约列表 -->
			<view class="yyitem" v-for="item in roombookings" :key="item.appointmentId" @click="yxroomfn(item)">
				<view class="yybst" :class="{
		    yybstyyz: item.auditStatus === 1,
		    yybstyjs: item.auditStatus === 2,
		    yybstwks: item.auditStatus === 9,
		  }">
					{{ getStatus(item.startTime, item.endTime, item.auditStatus) }}
				</view>
				<view class="yydeso">
					<view class="yytime">
						<view class="yytimeitem">时间：</view>
						<view class="yytimeitems">
							{{ formatTimeRange(item.startTime, item.endTime) }}
						</view>
					</view>
					<view class="yytime">
						<view class="yytimeitem">主题：</view>
						<view class="yytimeitems">{{ item.appointmentTheme }}</view>
					</view>
					<view class="yytime">
						<view class="yytimeitem">预约人：</view>
						<view class="yytimeitems">{{ item.createUser }}</view>
					</view>
				</view>
				<view class="yydest">
					<view class="yytime">
						<view class="yytimeitem">人数：</view>
						<view class="yytimeitems">{{ item.appointmentNumber }}</view>
					</view>
					<!-- <view class="yytime">
						<view class="yytimeitem">设备：</view>
						<view class="yytimeitems">{{item.startTime}}</view>
					</view> -->
					<view class="yytime">
						<view class="yytimeitem">房间：</view>
						<view class="yytimeitems">{{ item.roomName }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="activeTab === 1" class="yyitembox">
			<view class="yyitem" v-for="item in devbookings" :key="item.appointmentId" @click="yxroomfndec(item)">
				<view class="yybst" :class="{
	  yybstyyz: item.auditStatus == 1,
	  yybstyjs: item.auditStatus == 2,
	  yybstwks: item.auditStatus == 9,
				  yybstwks: item.auditStatus == 11,
	}">
					{{
	  item.auditStatus == 1
	    ? "已通过"
	    : item.auditStatus == 2
	    ? "不通过"
	    : item.auditStatus == 9
	    ? "预约中"
				  : item.auditStatus == 11
				  ? "已过期"
	    : "未知状态"
	}}
				</view>
				<view class="yydesod">
					<view class="yytime">
						<view class="yytimeitem">预约人：</view>
						<view class="yytimeitems">{{ item.createUser }}</view>
					</view>
					<view class="yytime">
						<view class="yytimeitem">预约设备：</view>
						<view class="yytimeitems">
							{{ formattedDeviceNames(JSON.parse(item.deviceDetail)) }}
						</view>
					</view>
					<view class="yytime">
						<view class="yytimeitem">时间：</view>
						<view class="yytimeitems">
							{{ formatTimeRange(item.startTime, item.endTime) }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0, // 默认选中第一个Tab
				tabshow: false,
				pageNum: 1,
				pageSize: 20,
				pageNums: 1,
				pageSizes: 20,
				title: "预约记录",
				navBarHeight: 50, // 导航栏高度
				menuRight: 10, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 50, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 60,
				roombookings: [],
				devbookings: [],
				underlineLeft: "25%",
			};
		},
		onReady() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
		},
		methods: {
			formattedDeviceNames(items) {
				return items.map((item) => item.deviceName).join(", ");
			},
			yxroomfndec(item) {
				console.log("选择的数据", item);

				uni.setStorage({
					key: "deviceDataxq",
					data: {
						deviceDetail: JSON.parse(item.deviceDetail),
						startTime: item.startTime,
						endTime: item.endTime,
						remark: item.remark,
						auditStatus: item.auditStatus,
						appointmentId: item.appointmentId,
					},
					success: () => {
						uni.navigateTo({
							url: "/pages/devbookxq/devbookxq", // 要跳转的非 tabBar 页面路径，可以带参数
						});
						console.log("数据存储成功");
					},
				});
			},
			updateUnderlinePosition() {
				// 根据activeTab计算下划线的位置
				if (this.activeTab == 0) {
					this.underlineLeft = "25%";
				}
				if (this.activeTab == 1) {
					this.underlineLeft = "75%";
				}
			},
			setActiveTab(index) {
				this.activeTab = index;
				this.updateUnderlinePosition();
			},
			roombookingfns() {
				this.$myRequest({
					url: "/client/appointment/roomAppointmentRecord",
					method: "get",
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					console.log("预约列表", res.data);
					// this.roombookings = res.data.list;

					const newListData = [...this.roombookings, ...res.data.list];
					this.roombookings = newListData;
				});
			},
			getStatus(startTime, endTime, auditStatus) {
				if (!startTime || !endTime) {
					return "未提供开始时间或结束时间";
				}

				// 获取当前时间
				const now = new Date();

				// 替换空格为T，并转换为ISO 8601格式
				const formattedStartTime = startTime.replace(" ", "T");
				const formattedEndTime = endTime.replace(" ", "T");

				// 创建开始时间和结束时间的 Date 对象
				const startDateTime = new Date(formattedStartTime);
				const endDateTime = new Date(formattedEndTime);

				// 根据当前时间和审核状态返回相应状态
				if (auditStatus === 1) {
					if (now < startDateTime) {
						return "未开始";
					} else if (now >= startDateTime && now < endDateTime) {
						return "预约中";
					} else {
						return "已结束";
					}
				} else {
					if (auditStatus === 2) {
						return "不通过";
					}
					if (auditStatus === 9) {
						return "待审核";
					}
					if (auditStatus === 11) {
						return "已过期";
					}
				}
			},
			formatTimeRange(startTime, endTime) {
				if (startTime === "" || endTime === "") {
					return "数据错误";
				}

				// 将字符串转换为 Date 对象
				const startDate = new Date(startTime.replace(/-/g, "/")); // 替换所有的'-'号
				const endDate = new Date(endTime.replace(/-/g, "/"));

				// 格式化日期部分
				const startDateString = this.formatDate(startDate); // 格式化开始日期部分

				// 格式化时间部分
				const startTimeString = this.formatTime(startDate); // 格式化开始时间部分
				const endTimeString = this.formatTime(endDate); // 格式化结束时间部分

				// 格式化成所需的字符串
				const formattedTimeRange = `${startDateString} ${startTimeString}~${endTimeString}`;

				return formattedTimeRange;
			},

			// 辅助函数，格式化日期部分
			formatDate(date) {
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // 月份从0开始，需要加1
				const day = this.padZero(date.getDate());

				// 返回格式化后的日期部分字符串
				return `${year}-${month}-${day}`;
			},

			// 辅助函数，格式化时间部分
			formatTime(date) {
				const hours = this.padZero(date.getHours());
				const minutes = this.padZero(date.getMinutes());

				// 返回格式化后的时间部分字符串
				return `${hours}:${minutes}`;
			},

			// 辅助函数，补零函数，用于确保日期时间部分是两位数
			padZero(num) {
				return num.toString().padStart(2, "0");
			},
			yxroomfn(item) {
				console.log("数据接口");
				// this.bookshow = true
				this.yxroom = item;
				uni.setStorage({
					key: "yxroom",
					data: item,
					success: function() {
						console.log("数据存储成功");
						uni.navigateTo({
							url: "/pages/roomxq/roomxq", // 要跳转的非 tabBar 页面路径，可以带参数
						});
					},
				});

				// console.log("yxroom", this.yxroom);
			},
			devbookingfn() {
				this.$myRequest({
					url: "/client/appointment/deviceAppointmentRecord",
					method: "get",
					data: {
						pageNum: this.pageNums,
						pageSize: this.pageSizes,
					},
				}).then((res) => {
					console.log("预约列表", res.data);
					// this.devbookings = res.data.list;

					const newListData = [...this.devbookings, ...res.data.list];
					this.devbookings = newListData;
				});
			},
		},
		onReachBottom() {
			if (this.activeTab == 0) {
				this.pageNum = this.pageNum + 1;
				this.roombookingfns();
				console.log("触底函数");
			}
			if (this.activeTab == 1) {
				this.pageNums = this.pageNums + 1;
				this.devbookingfn();
				console.log("触底函数");
			}
		},
		watch: {
			activeTab: {
				handler(i) {
					if (i == 0) {
						this.pageNum = 1
						this.roombookings = []
						this.roombookingfns();
					}
					if (i == 1) {
						this.pageNums = 1
						this.devbookings = []
						this.devbookingfn();
					}
				},
				immediate: true,
				deep: true,
			},
		}

	};
</script>

<style></style>